<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <!-- 必须的 meta 标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- Bootstrap 的 CSS 文件 -->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #app{
            display: inline-block;
            margin-left: 5px;
        }
        body{
            font-size: 10px;
        }
        td{
            width: 50px ;
        }
    </style>
</head>
<body>
<div class="container-fluid content" id="matterCount">
    <div class="toolbar" style="float: right">
<!--        <input type="text" id="selName" placeholder="请输入货物名称">-->
<!--        <button class="btn btn-primary" @click="selCustomerByName()">查询</button>-->
        <button class="btn btn-success" onclick="location.href='addOrderForm.html'">添加</button>
        <button class="btn btn-danger" id="del-btn" @click="delCustomerAll()">批量删除</button>
<!--        <a class="btn btn-warning " href="../Matter/importCustomerExcel" >导出(Excel)</a>-->
    </div>
    <table id="customer-tab" class="table table-hover" style="text-align: center;line-height: 38px">
        <tr>
            <th><input id="checkAll" type="checkbox" @click="allCheck"></th>
            <th>售货订单编号</th>
            <th>业务员编号</th>
            <th>财务员编号</th>
            <th>审核</th>
            <th>审核结果</th>
            <th>收款收据</th>
            <th>客户信息</th>
            <th>物质明细表编号</th>
            <th>物质价格表编号</th>
            <th>操作</th>
        </tr>
        <tr v-for="Of in list">
            <td><input class="check" type="checkbox" :value="Of.xhorderNo" @click="isCheckAll"></td>
            <td>{{Of.xhorderNo}}</td>
            <td>{{Of.traderNo}}</td>
            <td>{{Of.treasurerNo}}</td>
            <td>{{Of.isCheck==1?"通过":"不通过"}}</td>
            <td>{{Of.checkRes}}</td>
            <td>{{Of.recCurrencyRcept==1?"是":"否"}}</td>
            <td :value="Of.customerNo">{{Of.companyName}}</td>
            <td>{{Of.itemsInfoNo}}</td>
            <td>{{Of.itemsNo}}</td>
            <td>
<!--                <button type="button" class="btn btn-primary"-->
<!--                        style="width: 70px"-->
<!--                        @click="openUpds(Of)">修改-->
<!--                </button>-->
                <button type="button" class="btn btn-danger" id="shenhe" style="width: 70px;" @click="openUpd(Of)">审核
                </button>
            </td>

        </tr>

    </table>
    <!--            分页-->
    <div class="pagination-div">
        <!--                无序列表 -->
        <ul class="pagination" id="page-ul">
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" @click="cutPage(1)">首页</a>
            </li>
            <li class="page-item" v-if="page.pageNow!=1">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageNow-1)">{{page.pageNow-1}}</a></li>
            <li class="page-item active">
                <a class="page-link" href="javascript:void(0);">{{page.pageNow}}</a>
            </li>
            <li class="page-item" v-if="page.pageNow!=page.pageTotal">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageNow+1)">{{page.pageNow+1}}</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);
                   ">共{{page.count}}条数据</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageTotal)">尾页</a>
            </li>
        </ul>
    </div>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">审核窗口</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body" id="app-div">
                    <form id="matterInfo-form">
                        <div class="input-group mb-3" style="width: 450px;padding-left: 65px;">
                            审核：
                            <label class="radio-inline" style="width: 140px;text-align: center;">
                                <input type="radio" name="isCheck" value="1"  v-model="Oform.isCheck">通过
                            </label>
                            <label class="radio-inline" style="width: 140px;text-align: center;">
                                <input type="radio" name="isCheck" value="0"  v-model="Oform.isCheck">不通过
                            </label>
                        </div>
                        <div class="input-group mb-3" style="width: 450px">
                            <label for="CheckRes" style="width: 140px;text-align: center;">审核结果:</label>
                            <input type="text" name="CheckRes" v-model="Oform.checkRes" class="form-control" id="CheckRes">
                        </div>
                        <input type="text" name="xhorderNo" style="display: none" step="0.01" v-model="Oform.xhorderNo" class="form-control"
                        >
                    </form>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="submit-emp" style="margin-right:217px "
                            @click="updMatterPrice()">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../bootstrap/vue.js"></script>
<script type="text/javascript" src="../bootstrap/jquery3.6.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bootstrap/my.js"></script>
<script>
    let matterPriceVue;
    let map;

    // 初始化表格数据
    $(function () {
        // 调用查询方法 因为是第一次查询所以当前页参数1
        map = selOrderForm(1);
        // Vue列表 表格数据
        matterPriceVue = new Vue({
            el: '#matterCount',
            data: {
                list: map.list,// 展示表格
                page: map,// 用于分页
                Oform:{}
            },// 参数调用查询函数
            methods: {
                allCheck: function () {
                    eventHub.$emit("allCheck",null);
                },

                isCheckAll: function () {
                    eventHub.$emit("isCheckAll",null);
                },
                cutPage: function (pageNow) {
                    // // var z=$("#selName").val();
                    matterPriceVue.list = selOrderForm(1).list;
                    matterPriceVue.page.pageNow=pageNow;
                }
                ,
                updMatterPrice:function(){
                    $.ajax({
                        type:"post",
                        url:"../OrderForm/updOrderFormByshenhe",
                        data:$("#matterInfo-form").serialize(),
                        dataType:"json",
                        success:function (data){
                            alert(data.message);
                            matterPriceVue.list = selOrderForm(1).list;
                            this.page = selOrderForm(1);
                            $('#myModal').modal('hide');
                        }
                    })
                },

                openUpd: function (Of) {
                    // 打开模态框 获取模态框id.modal('show');
                    $('#myModal').modal('show');
                    this.Oform = Of;

                },
                delCustomerAll: function () {
                    let ids = "";
                    // 获取复选框中的值 id值 使用类选择器each()遍历方法
                    $(".check").each(function () {
                        // 对所有符合该选择器的元素进行操作。 this 复选框.value
                        // 判断该复选框是否选中
                        if (this.checked) {
                            ids += this.value + ",";
                        }
                    })
                    if(ids=="") return ;
                    // ajax把拼接的id传入到后台
                    $.ajax({
                        type: "post",
                        url: "../OrderForm/delOrderForm",
                        data: {ids: ids},
                        dataType: "json",
                        success: function (data) {
                            // 删除完成后重新查询第一页
                            alert(data.message)
                            matterPriceVue.list = selOrderForm(1).list;
                            matterPriceVue.page = selOrderForm(1);
                            eventHub.$emit("closeCheckAll",null);
                        }
                    });
                },
                // selCustomerByName:function (){
                //     var z=$("#selName").val();
                //     matterPriceVue.list = selMatter(1,z).matterPricelist;
                //     matterPriceVue.page = selMatter(1,z);
                // },
            }

        });
    });


    function selOrderForm(pageNow) {
        $("#shenhe").hide();
        let map = [];
        $.ajax({
            type: "post",
            url: "../OrderForm/selOrderForm",
            data: {pageNow: pageNow, pageCount: 5},// 携带当前页参数，显示的条数
            dataType: "json",
            async: false,
            success: function (data) {shenhe
                // 接受Controller层查询结果
                map = data;
                if(map.zxc==1){
                    $("#shenhe").show();
                }

            }
        });
        return map;
    }



</script>
</body>
</html>